<template>
  <div class="div">
    <div class="div1">
      <el-button type="primary" style="float: right" @click="upload">上传新版本</el-button>
    </div>
    <Tables :items="items" :butFlag="butFlag" :list="list" :loading="loading" :rules="rules" :high="high"
            @show="show" :editForm="editForm" @update="update" @del="del"/>
    <el-col :md="{span: 5, offset: 6}" :lg="{span: 4, offset: 10}">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20, 30, 40, 50]"
        :page-size="pagesize"
        :current-page="page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-col>
    <el-dialog title="添加" v-model="addForms" :close-on-click-modal="false"
               style="width: 758px;margin: 104px auto" @close="unset('addForm')">
      <el-form :model="addForm" label-width="80px" ref="addForm" :rules="rules">
        <el-form-item label="上传文件" prop="fileName">
          <el-upload
            id="file"
            v-model="addForm.fileName"
            :action="path"
            :file-list="fileList"
            :auto-upload="true"
            ref="upload"
            :on-success="handlePreview"
            :before-upload="beforeUp"
            :on-remove="remove"
            name="file">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="版本名" prop="name">
          <el-input v-model="addForm.name" auto-complete="off" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="版本号" prop="versionId">
          <el-input v-model="addForm.versionId" auto-complete="off" style="width: 200px;"></el-input>
        </el-form-item>
        <el-form-item label="提示信息" prop="issue">
          <el-input type="textarea" v-model="addForm.issue" auto-complete="off" style="width: 200px;"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="unset('addForm')">取消</el-button>
        <el-button type="primary" @click.native="addSubmit('addForm')">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import Tables from '../components/Tables.vue'
  import axios from 'axios'
  import moment from 'moment'
  import {mapState} from 'vuex'
  export default{
    name: 'Version',
    components: {
      Tables
    },
    data () {
      return {
        list: [],
        high: 0,
        loading: false,
        butFlag: true,
        items: [
          {
            prop: 'id',
            label: '编号',
            add: false,
            table: false,
            edit: false
          },
          {
            prop: 'name',
            label: '版本名',
            add: false,
            table: true,
            edit: true
          },
          {
            prop: 'versionId',
            label: '版本号',
            add: false,
            table: true,
            edit: true,
            disabled: true
          },
          {
            prop: 'url',
            label: '下载地址',
            add: false,
            table: true,
            edit: false,
            dateSelect: '0'
          },
          {
            prop: 'issue',
            label: '提示信息',
            add: true,
            table: true,
            edit: true,
            textArea: '0'
          },
          {
            prop: 'fileName',
            label: '文件名',
            add: true,
            table: true,
            edit: false
          }
        ],
        rules: {
          name: [
            {required: true, message: '请填写版本名', trigger: 'blur'},
            {min: 1, max: 128, message: '长度在 1 到 128 个字符', trigger: 'blur'}
          ],
          versionId: [
            {required: true, message: '请填写版本号', trigger: 'blur'},
            {min: 1, max: 32, message: '长度在 1 到 32 个字符', trigger: 'blur'}
          ],
          fileName: [
            {required: true, message: '请上传更新版本', trigger: 'blur'}
          ],
          issue: [
            {required: true, message: '请填写版本更新功能描述', trigger: 'blur'},
            {min: 1, max: 256, message: '长度在 1 到 256 个字符', trigger: 'blur'}
          ]
        },
        page: 1,
        pagesize: 20,
        total: 0,
        editForm: {
          name: '',
          versionId: '',
          issue: '',
          id: ''
        },
        addForms: false,
        addForm: {
          name: '',
          versionId: '',
          issue: '',
          fileName: ''
        },
        path: `${this.BASE_URL}/version/get`,
        fileList: []
      }
    },
    mounted () {
      this.high = window.innerHeight - 180
    },
    computed: {
      ...mapState({
        isLogin: state => state.eui.isLogin,
        username: state => state.eui.username
      })
    },
    created () {
      if (!sessionStorage.getItem('username')) {
        this.$router.replace('/')
      }
      this.get()
    },
    methods: {
      handleCurrentChange (val) {
        this.page = val
        this.get()
      },
      handleSizeChange (val) {
        this.pagesize = val
        this.get()
      },
      addSubmit (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            axios({
              method: 'get',
              url: `${this.BASE_URL}/version/add`,
              responseType: 'json',
              params: {
                page: this.page,
                pagesize: this.pagesize,
                name: this.addForm.name,
                versionId: this.addForm.versionId,
                fileName: this.addForm.fileName,
                issue: this.addForm.issue
              }
            }).then((response) => {
              if (response.data.statuCode === '0') {
                this.addForms = false
                this.total = response.data.total
                this.list = response.data.data
                this.$message('添加成功')
              } else {
                this.$message.error('版本号已存在')
              }
            }).catch(() => {
              this.loading = false
            })
          }
        })
      },
      show (msg) {
        this.editForm.name = msg.name
        this.editForm.versionId = msg.versionId
        this.editForm.issue = msg.issue
        this.editForm.id = msg.id
      },
      update (msg) {
        axios({
          method: 'get',
          url: `${this.BASE_URL}/version/refresh`,
          responseType: 'json',
          params: {
            page: this.page,
            pagesize: this.pagesize,
            id: msg.id,
            name: msg.name,
            issue: msg.issue
          }
        }).then((response) => {
          if (response.data.statuCode === '0') {
            this.loading = false
            this.total = response.data.total
            this.list = response.data.data
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            })
          } else {
            this.$message.error('该版本已存在')
          }
        }).catch(() => {
          this.loading = false
        })
      },
      del (msg) {
        this.loading = true
        axios({
          method: 'get',
          url: `${this.BASE_URL}/version/del`,
          responseType: 'json',
          params: {
            page: this.page,
            pagesize: this.pagesize,
            id: msg.id
          }
        }).then((response) => {
          this.loading = false
          this.total = response.data.total
          this.list = response.data.data
          this.$message('删除成功')
        }).catch(() => {
          this.loading = false
        })
      },
      query (msg) {
        this.title = msg.title
        this.status = msg.status
        this.page = 1
        this.get()
      },
      get () {
        this.loading = true
        axios({
          method: 'get',
          url: `${this.BASE_URL}/version/getAll`,
          responseType: 'json',
          params: {
            page: this.page,
            pagesize: this.pagesize
          }
        }).then((response) => {
          this.loading = false
          this.total = response.data.total
          this.list = response.data.data
        }).catch(() => {
          this.loading = false
        })
      },
      upload () {
        this.addForms = true
      },
      handlePreview (res, file) {
        this.addForm.fileName = res
      },
      remove (file, fileList) {
        this.addForm.fileName = undefined
      },
      beforeUp (file) {
        var name = file.name.substr(file.name.lastIndexOf('.'))
        if (name === '.apk') {
          return true
        } else {
          this.$message.error('请上传apk文件')
          return false
        }
      },
      unset (formName) {
        this.addForms = false
        this.$refs[formName].resetFields()
        this.fileList = []
      }
    }
  }
</script>
<style scoped>
  .div1 {
    width: 100%;
    height: 50px;
    /*padding-top: 10px;*/
    float: right;
  }

  .el-select-dropdown__item {
    height: auto;
  }
</style>
